<template>
    <div class="container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容（做多吐槽120字" v-model="name"> </textarea>
        <mt-button size="large" type="primary" class="fa" @click="setData">发表评论</mt-button>
        <div class="cm-list" v-for="(item,index) in dataOb">
            <div class="cm-header">
                <span>第{{index+1}}楼&nbsp;&nbsp;用户：{{item.name}}&nbsp;&nbsp;</span>
                <span>发表时间：{{item.time|DataFormat}}</span>
            </div>
            <p>{{item.title}}</p></div>

        <mt-button size="large" type="danger" >加载更多</mt-button>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                dataOb:[{
                    name:"匿名用户",title:"锄禾日当午，汗滴禾下土",time:new Date()
                },{
                    name:"匿名用户",title:"锄禾日当午，汗滴禾下土",time:new Date()
                },{
                    name:"匿名用户",title:"锄禾日当午，汗滴禾下土",time:new Date()
                },{
                    name:"匿名用户",title:"锄禾日当午，汗滴禾下土",time:new Date()
                },
                ],
                name:''
            }
        },
        methods:{
            setData(){
                if(this.name.trim().length==0){
                    return;
                }
                this.dataOb.unshift({name:'匿名用户',title:this.name,time:new Date()});
                this.name='';
            }
        }
    }
    // 这里应该写加载评论之类的但是我没有获取数据的地址，所以就不写了,下面是应该写的
    // import { Toast } from "mint-ui";
    // export default {
    //     data() {
    //         return {
    //             pageIndex: 1, // 默认展示第一页数据
    //             comments: [] // 所有的评论数据
    //         };
    //     },
    //     created() {
    //         this.getComments();
    //     },
    //     methods: {
    //         getComments() {
    //             // 获取评论
    //             this.$http
    //                 .get("api/getcomments/" + this.id + "?pageindex=" + this.pageIndex)
    //                 .then(result => {
    //                     if (result.body.status === 0) {
    //                         // this.comments = result.body.message;
    //                         // 每当获取新评论数据的时候，不要把老数据清空覆盖，而是应该以老数据，拼接上新数据
    //                         this.comments = this.comments.concat(result.body.message);
    //                     } else {
    //                         Toast("获取评论失败！");
    //                     }
    //                 });
    //         },
    //         getMore() {
    //             // 加载更多
    //             this.pageIndex++;
    //             this.getComments();
    //         }
    //     },
    //     props: ["id"]
    // }
</script>

<style scoped lang="less">
    .container {
        #bt{
        }
        padding-top: 10px;
        h3 {
            font-size: 18px;
        }
        textarea {
            padding: 10px 10px;
            font-size: 14px;
            margin-bottom: 0;
        }
        button {
            font-size: 14px;
            margin-bottom: 5px;
        }
        .fa {
            margin-top: 5px;
        }
        .cm-list {
            .cm-header {
                font-size: 12px;
                background-color: #b4b4b3;
            }
            p {
                text-indent: 2em;
                font-size: 12px;
                color: #222222;
                margin: 3px;
            }
        }
    }
</style>